/*
 * @Author: YuWuChen82 1813109877@qq.com
 * @Date: 2025-07-20
 * @LastEditors: YuWuChen82 1813109877@qq.com
 * @LastEditTime: 2025-07-20
 * @FilePath: \antd-demo\src\pages\Login\index.jsx
 * @Description:
 */
import React from "react";
import { Card, Form, Input, Button,message } from "antd";
import Logo from "@/assets/react.svg";
import "./index.scss";
import { useDispatch } from "react-redux";
import { fetchLogin } from "@/store/modules/user";
import { useNavigate } from "react-router-dom";

function Login() {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const onFinish = async (values) => {
    //触发异步action fetchLogin
    await dispatch(fetchLogin(values))
    //1.跳转到首页
    navigate('/')
    //2.提示用户登录成功
    message.success('登录成功')
  };
  return (
    <div className="login">
      <Card className="login-container">
        <img src={Logo} alt="" className="login-logo" />
        <Form validateTrigger="onBlur" onFinish={onFinish}>
          <Form.Item
            name="mobile"
            rules={[
              { required: true, message: "请输入手机号" },
              { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号" },
            ]}
          >
            <Input size="large" placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item
            name="code"
            rules={[{ required: true, message: "请输入验证码" }]}
          >
            <Input size="large" placeholder="请输入验证码" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" size="large" block>
              {" "}
              登录{" "}
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}

export default Login;
